<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
<link rel="shortcut icon" href="img/ic.png">
    <title>成绩管理</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/cdn/font_evmq6xwfabutyb9.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/cdn/html5shiv-3.7.0.js"></script>
    <script src="js/cdn/respond-1.4.2.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/cdn/dataTables.bootstrap.css">
    <link rel="stylesheet" href="css/cdn/font_i0327076nave7b9.css">
    <link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style>
		#example_paginate{
			float:right;
		}
		.handle-btn{
			cursor: pointer;
		    margin: 0 2px;
		}
		#wrapper {
		    padding-left:0px;
		}
		.navigation{
			border-bottom: 3px solid #edebeb;
		}
		
		.navigation a:hover{
			color: #0F6AFC;
			border-bottom: 2px solid #01AAED;
		}
		.this{
			color: #01aaed;
			font-weight:bold;
			border-bottom: 2px solid #01AAED;
		}
		
		#check>tbody>tr{
			line-height: 20px;
		}
		.odd{
			background: #f5f5f5;
		}
		[v-cloak] {
			display: none;
		}
        .gao{
            font-size: 14px;
            font-weight: normal;
        }
	</style>
</head>

<body>

    <div id="wrapper">
        <div id="page-wrapper">

            <div class="container-fluid">
                <div class="row">
                	<div class="panel">
                        <div class="panel-heading">
                        	<ul class="nav">
                        		<li style="float: left;"><b class="panel-title" style="line-height: 34px;"><span class="xiahua">测评成绩管理</span></b></li>
                        		<li style="float: left; padding-left: 30px; line-height: 34px;">
                        			<div class="btn-group" style="float: right; margin-right: 30px;">
										<select v-model="year" @change="drawLine()" v-cloak>
										  <option v-for="option in options" v-bind:value="option.value" >
										    {{ option.text }}
										  </option>
										</select>
									</div>
                        		</li>
                            </ul>
                            <ul class="nav" style="margin-top: 15px;">
                                <li style="float: left;padding-right: 30px;">
                                    <div class="form-group">
                                        <label class="col-sm-6 gao">选择测评车辆</label>
                                        <!--指定 date标记-->
                                        <div class="col-sm-6 gao">
                                            <select class="form-controls" v-model="selected" id="teamId" v-cloak>
                                                <option  v-for="option in DetailsObj"  :id="option.teamId" v-bind:value="option.teamName" >
                                                    {{option.teamName}}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </li>
                                <li style="float: left;padding-right: 10px;">
                                    <div class="form-group">
                                        <!--指定 date标记-->
                                        <div class='col-sm-6 gao input-group right' id='datetimepicker1'>
                                            <input type='text' id="startTime"  class="form-controls" placeholder="测评开始时间"/>
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </li>
                                <li style="float: left;margin: 15px 10px 0 0;width: 10px;height: 2px;background: #666;">

                                </li>
                                <li style="float: left;padding-right: 30px;">
                                    <div class="form-group">
                                        <!--指定 date标记-->
                                        <div class='col-sm-6 input-group right gao' id='datetimepicker2'>
                                            <input type='text' class="form-controls" id="endTime" placeholder="测评结束时间"/>
                                            <span class="input-group-addon">
					                    <span class="glyphicon glyphicon-calendar"></span>
					                </span>
                                        </div>
                                    </div>
                                </li>
                                <li style="float: left;">
                                    <button class="btn btn-primary" type="button" v-on:click="selectTar()" style="margin-right: 15px">
                                        查询
                                    </button>
                                    <button class="btn btn-primary" type="button" v-on:click="reset()" >
                                        重置
                                    </button>
                                </li>
                        	</ul>
                        </div>
                        <div class="panel-body" style="padding-top: 0">
                            <table id="example" class="display" width="100%"></table>
                        </div>
                   </div>
                </div>
                    
                <!-- /.曲线图 -->
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <!-- tab table-->
	<script src="js/cdn/jquery.dataTables.min.js"></script>
    <script src="js/cdn/dataTables.bootstrap.js"></script>
	<script src="nuget/content/scripts/toastr.js"></script>
<script type="text/javascript" src="js/common.js" ></script>
    <!-- Morris Charts JavaScript -->
    <script src="js/plugins/morris/raphael.min.js"></script>
	<script type="text/javascript" src="js/vue/vue.js" ></script>
    <script type="text/javascript" src="js/vue/vue-router.js" ></script>
    <script src="js/cdn/moment-with-locales.min.js"></script>
    <script src="js/cdn/bootstrap-datetimepicker.min.js"></script>

    <script>
        $(function () {
			var userName = localStorage.getItem("userName");    $("#userName").text(userName);
			var picker1 = $('#datetimepicker1').datetimepicker({
				format: 'YYYY-MM-DD HH:mm:00',
				locale: moment.locale('zh-cn'),
				//minDate: '2016-7-1'
			});
			var picker2 = $('#datetimepicker2').datetimepicker({
				format: 'YYYY-MM-DD HH:mm:00',
				locale: moment.locale('zh-cn')
			});
			//动态设置最小值
			picker1.on('dp.change', function (e) {
				picker2.data('DateTimePicker').minDate(e.date);
			});
			//动态设置最大值
			picker2.on('dp.change', function (e) {
				picker1.data('DateTimePicker').maxDate(e.date);
			});
		})
		Vue.filter("timeChange", function(value) {
			return replaceTime(value / 1000);
		});
		var vue = new Vue({
		  el: '#wrapper',
		  data:{ 
		  	dataObj: {
		  		teamId:"",
		  		aDataSort:"",
		  		parentNode:""
		  	},
		  	year: '2017',
		  	options: [
		      { text: '2016', value: '2016' },
		      { text: '2017', value: '2017' },
		      { text: '2018', value: '2018' }
		    ],
			selected:[],
			DetailsObj:{},
		  },
		  mounted:function(){
		  	this.deviceBasicId();
		  	this.scenesResults();
		  },
		  methods:{
		  	//筛选
			  selectTar:function () {
                  var teamNames=$("#teamId option:selected").val();
                  var selectStarTime=new Date($("#startTime").val()).getTime();
                  var selectEndTime=new Date($("#endTime").val()).getTime();
                  console.log(teamNames);//测评车辆名
                  console.log(selectStarTime);//开始时间
                  console.log(selectEndTime);//测评结束时间
                  if (teamNames){
                  	if ($("#startTime").val()!=""){
                  		$("#example tbody tr").each(function () {
                  			var testTime=parseInt($(this).find("a").attr("data-creat"));
                            if ($(this).find("b").html()==teamNames&&testTime>=selectStarTime&&testTime<=selectEndTime){
                            	$(this).css("display","table-row");
                            }else{
								$(this).css("display","none");
                            }
						})
                    }else{
						$("#example tbody tr").each(function () {
							if ($(this).find("b").html()==teamNames){
								$(this).css("display","table-row");
							}else{
								$(this).css("display","none");
							}
						})
                    }
                  }else{
					  if ($("#startTime").val()!=""){
						  $("#example tbody tr").each(function () {
							  var testTime=parseInt($(this).find("a").attr("data-creat"));
							  if (testTime>=selectStarTime&&testTime<=selectEndTime){
								  $(this).css("display","table-row");
							  }else{
								  $(this).css("display","none");
							  }
						  })
                      }else{
					  	return false
                      }
                  }
			  },
              //重置
			  reset:function () {
				  $("#example tbody tr").each(function () {
					  $(this).css("display","table-row");
				  })
			  },
              //选项初始化
			  scenesResults:function(){
				  var _self = this;
				  $.ajax({
					  type: "get",
					  url: url + '/users/'+adminId+'/stadiumResultDetails',
					  async: false,
					  data:{
						  "currentPage":1,
						  "pageSize":999,
					  },
					  async: false,
					  dataType: 'json',
					  contentType: "application/json; charset=utf-8",
					  beforeSend: function (request) {
						  request.setRequestHeader("accessToken", accessToken);
					  },
					  success: function (data) {
					  	console.log(data);
						  if(data.code == 1){
							  _self.DetailsObj = {};
							  var result = data.result;
							  console.log(result)
							  _self.DetailsObj = result;
						  }
					  }
				  });
			  },
		  	//初始化显示详情
		  	deviceBasicId:function(){
		  		$(document).ready(function() {
				  var myTable = $('#example').DataTable({
			      "processing": false, //DataTables载入数据时，是否显示‘进度’提示  
			      "stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
			      "scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变  
			      "paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页  
			      "language": lang, //提示信息
			      "destroy":true,//Cannot reinitialise DataTable,解决重新加载表格内容问题  
			      "autoWidth": true, //自适应宽度，
			      "lengthMenu": [8, 30, 50],
			      "stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
			      "showRowNumber":true,
			      "searching": false, //是否允许Datatables开启本地搜索
			      "paging": false, //是否开启本地分页
			      "lengthChange": false, //是否允许产品改变表格每页显示的记录数
			      "info": false, //控制是否显示表格左下角的信息
			      //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
			     "ordering": false,
			      "deferRender": true, //延迟渲染
			      //"ajax":"json/device.json",
			      "ajax": {
			      	url : url +'/users/'+adminId+'/stadiumResultDetails',//117
					type : 'get',
					async: false,
					dataType : 'json',
					beforeSend: function(request) {
	            		request.setRequestHeader("accessToken", accessToken);
			        },
					success : function(data) {
						console.log(data)
						if(data['code'] == 1){
							if(data.result.length != 0)
								$('#example').dataTable().fnAddData(data.result);
							else
								$('#example').dataTable().fnClearTable();
						}else{
							ifajax(data);
						}
					}
				  }, //数据的路径 "http://192.168.5.133:8081/ic-iot/admin/'+adminId+'/devices" /"json/device.json"
				  "columns": [{ //定义列
				        "data":"riwso",
				        "width":"50px",
				        "render":function(data, type, full, meta ){
				        	return (meta.row+1);
				        },
				        "sTitle": "序号", //标题
				        "sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错  
				    },{
		                "data":function(obj){
		                	var creatTimes=obj.createTime;
		                	return '<a href="ScoreDetails.html?teamId=' + obj.teamId + '" data-creat="'+creatTimes+'" target="_self" style="color:#1aa79d; text-decoration:none;"><b>' + obj.teamName + '</b></a>';
				        },
		                "sTitle": "测评车辆",
		                "sDefaultContent": "",
		            },{
		                "data": function(obj){
		                	if(obj.stadium2Time != null){
		                		return obj.stadium2Time+'秒';
		                	}else{
		                		return ''
		                	}
				        },
		                "sTitle": "高速时间",
		                "sDefaultContent": "",
		            },{
				      	"data":function(obj){
				            if(obj.stadium2Score != null){
		                		return obj.stadium2Score+'分';
		                	}else{
		                		return ''
		                	}
				        },
				      	"sTitle":"高速成绩",
				      	"sDefaultContent": "", 
				    },{
		                "data": function(obj){
				            if(obj.stadium1Time != null){
		                		return obj.stadium1Time+'秒';
		                	}else{
		                		return ''
		                	}
				        },
		                "sTitle": "城市时间",
		                "sDefaultContent": "",
		            },{
				      	"data": function(obj){
				            if(obj.stadium1Score != null){
		                		return obj.stadium1Score+'分';
		                	}else{
		                		return ''
		                	}
				        },
				      	"sTitle":"城市成绩",
				      	"sDefaultContent": "", 
				    },{
		                "data": function(obj){
				            if(obj.stadium3Time != null){
		                		return obj.stadium3Time+'秒';
		                	}else{
		                		return ''
		                	}
				        },
		                "sTitle": "城郊时间",
		                "sDefaultContent": "",
		            },{
				      	"data": function(obj){
				            if(obj.stadium3Score != null){
		                		return obj.stadium3Score+'分';
		                	}else{
		                		return ''
		                	}
				        },
				      	"sTitle":"城郊成绩",
				      	"sDefaultContent": "", 
				    },{
				      	"data": function(obj){
				            if(obj.totalScore != null){
		                		return obj.totalScore+'分';
		                	}else{
		                		return ''
		                	}
				        },
				      	"sTitle":"总成绩",
				      	"sDefaultContent": "", 
				    }]
			    });
			});
		  	},
			changeChNo: function(year) {
				this.year = year;
				this.drawLine();
			},
			drawLine:function(){
				$.ajax({
		  			type: "get",
		  			url:url+'/users/'+adminId+'/stadiumResultDetails',
		  			async: false,
		  			data:{
		  				year: this.year,
		  			},
		  			dataType: 'json',
		  			beforeSend: function(request) {
						request.setRequestHeader("accessToken", accessToken);
					},
					success: function(data) {
						if(data.result.length != 0){
							$('#example').dataTable().fnAddData(data.result);
						}else{
							$('#example').dataTable().fnClearTable();
						}		
					}
		  		});
			}
		  },
		});
	</script>
    
</body>

</html>
